<script lang="ts" setup>
import ShareIcon from "@/components/icon/ShareIcon.vue";
import laudIcon from "@/components/icon/LaudIcon.vue";
import CollectIcon from "@/components/icon/CollectIcon.vue";
import { HomeDeatilType } from "@/typing";
import { toRefs, ref } from "vue";
import { useRouter } from 'vue-router'
import { storeToRefs } from "pinia";
import { userLocalStoriesStore } from "../../store";

const router = useRouter()

const userStore = userLocalStoriesStore();
const { isLogin } = storeToRefs(userStore);

const props = defineProps<{
    listItem: HomeDeatilType
}>()
const { listItem } = toRefs(props)

const show = ref(false);
const images = [
    props.listItem.img_url
];

function showImg() {
    show.value = true
}

function goToMakeSubtotal(imgUrl: string, forward: string, wordsInfo: string) {
    if (isLogin.value) {
        router.push({
            name: 'make-subtotal',
            query: {
                imgUrl,
                forward,
                wordsInfo
            }
        })
    }
    else {
        router.push({
            name: 'login',
        })
    }
}
</script>

<template>
    <div class="px-8 pt-5 pb-8">
        <div class="rounded-2xl shadow-md">
            <img class="rounded-t-2xl" rounded-t-sm :src="listItem.img_url" alt="img" @click="showImg">

            <van-image-preview v-model:show="show" :images="images" />

            <div class="pt-4 p-10">
                <div class="text-center text-gray-400">{{ listItem.title }} | {{ listItem.pic_info }}</div>
                <div class="py-10 min-h-[15rem] text-2xl">{{ listItem.forward }}</div>
                <div class="text-center text-gray-400">{{ listItem.words_info }}</div>
            </div>
        </div>
        <div class="flex justify-between items-center pt-8 px-3">
            <div class="flex justify-around items-center">
                <img class="rounded-full w-12 " src="../../assets/card/discovery.png" alt="img">
                <div class="text-gray-400 ml-3">小记</div>
            </div>
            <div class="flex justify-between items-center w-3/5">
                <img class="w-10 h-10" src="../../assets/card/diary_icon.png" alt="share"
                    @click="goToMakeSubtotal(listItem.img_url, listItem.forward, listItem.words_info)">

                <CollectIcon :listItem="listItem" />
                <laudIcon :countNum="listItem.like_count" />
                <ShareIcon :type="0" :shareList="listItem.share_list" />
            </div>
        </div>
    </div>
</template>